@import url('https://fonts.googleapis.com/css2?family=Smooch+Sans:wght@100..900&display=swap');


body{
      background:black;
      margin: 0;
}

h1{
    text-align: center;
    color: white;
    margin:0%;
    background: rgb(21,20,20);
    height: 60px;
    font-family:"Smooch Sans", sans-serif; 
    font-size:45px;
    
}

h2{
    color:white;
    text-align: center;
    margin-top: 0px;
    background: rgb(7,7,74);
    padding-bottom:5px;
     font-family:"Smooch Sans", sans-serif;
    font-size:30px;
}

h2:hover{
    opacity: 80%;
    color:yellow;
}

h3{
    color:yellow;
    margin-left: 2px;
     font-family:"Smooch Sans", sans-serif;
}

.dmca{
  display:flex;
  gap:40px;
  justify-content: center;
  flex-wrap: wrap;
   font-family:"Smooch Sans", sans-serif;
}

.links{
    text-decoration:none;
    color: yellow;
    display: inline;
}

/* Centraliza a busca na index */
.container-busca {
    text-align: center;
    margin:5px;
}

input {

    background:rgb(44, 41, 41) ;
    padding: 10px;
    width: 300px;
    border-radius: 5px 0 0 5px;
    border: none;
    color: whitesmoke;
    

    
}


button {

    
    padding: 10px;
    background:rgb(7,7,74);
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    
}

@media (max-width: 399px) {
  
  /* Centraliza a busca na index */
.container-busca {
    text-align: center;
    margin:5px;
}

input {

    width: 200px;
 
}

}

.card-container {
    /* Define o elemento como um contêiner de grade */
    display: grid;
    /* Adiciona espaçamento entre os cartões */
    gap:0%; 
   
    grid-template-columns: 1fr 1fr;
    padding: 0px;
    
}

.card-container {
    /* Define o elemento como um contêiner de grade */
    display: grid;
    /* Adiciona espaçamento entre os cartões */
    gap:0%; 
   
    grid-template-columns: 1fr 1fr;
    padding: 0px;
    
}

@media (min-width:768px){
 .card-container{ /* Esta é a chave para a responsividade: */
    /* - repeat(auto-fit, ...): Cria tantas colunas quanto couberem. */
    /* - minmax(300px, 1fr): Cada coluna terá no mínimo 300px de largura. */
    /* Se houver mais espaço, elas crescerão igualmente (1fr) para preenchê-lo, */
    /* garantindo que o número de colunas se ajuste (2, 3, 4, etc.). */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    padding: 1px;}

}

.card {
    
    margin: 3px;
    background:rgb(2, 2, 33);
    display: grid; /* Torna o card um contêiner de grid */
    max-height:300px; /* Defina uma altura fixa para o cartão (necessário) */
    text-decoration: none; 
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    
    /* 🔑 CHAVE PARA DISTRIBUIÇÃO VERTICAL: */
    /* Exemplo: 3 partes para a imagem e 1 parte para o texto (75%/25%) */
    grid-template-rows: 4fr 1fr;
}

@media (max-width: 480px) {
  .card h3, .card p  {
     display:-webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
  
}

.card:hover {
    opacity: 70%;
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.card img {
    /* Garante que a imagem preencha a largura do cartão */
    width: 100%;
    height: 100%;
    padding-bottom: 0px;
    aspect-ratio: 16/9;
}

.card h3, .card p {
    padding:0px 5px ;
    margin-top: 0%;
     font-family:"Smooch Sans", sans-serif;
}

/* Container de Paginação */
.pagination {
  list-style: none; /* Remove os marcadores de lista */
  padding: 0;
  display: flex; /* Alinha os botões horizontalmente */
  gap: 3px; /* Espaçamento entre os botões */
  justify-content: center;
  flex-wrap: wrap;
}

/* Item de cada Página */
.page-item {
  display: inline; /* Garante que os itens fiquem lado a lado */
}

/* O Estilo do Botão (o Link) */
.page-link {
  display: block; /* Ocupa todo o espaço do li */
  padding: 5px 8px; /* Controla o tamanho do botão. Menos padding = Menor botão */
  text-decoration: none; /* Remove o sublinhado */
  color: white;
  background-color: #431a1a;
  border: 1px solid #431a1a;
  /* Chave para o formato QUADRADO! */
  border-radius:4px; /* Garante cantos perfeitamente quadrados */
  transition: background-color 0.3s;
  font-size: 14px; /* Pequeno para botões de paginação */
  line-height: 1; /* Ajusta a altura da linha para centralizar o texto */
  text-align: center; /* Centraliza o número */
}

/* Efeito ao Passar o Mouse (Hover) */
.page-link:hover {
  background-color: #a08282;
}

/* Estilo para a Página Ativa */
.page-item.active .page-link {
  background-color: #305e8f; /* Cor de destaque */
  color: rgb(247, 246, 246);
  border-color:#305e8f;
}

/* Ajustes para botões "Anterior" e "Próximo" se eles forem diferentes */
.page-link.prev,
.page-link.next {
  min-width: 30px; /* Garante que a largura seja suficiente para o texto */
  background:rgb(74, 58, 58) ;
}

.page-link.prev:hover{
  opacity:70%;
}
.page-link.next:hover{
  opacity:70%;
}

/* Escondido por padrão (Telemóveis) */
.banner-desktop {
  display: none;
}

/* Visível por padrão */
.banner-mobile-only {
  display: block;
}

/* Esconde quando o ecrã for maior que 767px (Desktop/Tablets Grandes) */
@media (min-width: 768px) {
  .banner-mobile-only {
    display: none;
  }
}

/* Visível apenas em ecrãs maiores que 768px (Tablets e PCs) */
@media (min-width: 768px) {
  .banner-desktop {
    display: block;
  }
}

/*@media only screen and (min-width:300px) {
    .pagination{
          margin-top:5px;
          margin-left:80px;
 }

}

@media only screen and (min-width:375px) {
    .pagination{
          margin-top:5px;
          margin-left:110px;
 }

}

@media only screen and (min-width:420px) {
    .pagination{
          margin-top:5px;
          margin-left: 130px;
 }

}

@media only screen and (min-width:500px) {
    .pagination{
          margin-top:5px;
          margin-left: 170px;
 }

}

@media only screen and (min-width:550px) {
    .pagination{
          margin-top:5px;
          margin-left: 195px;
 }

}

  

@media only screen and (min-width: 600px) {
    .pagination{
          margin-top:10px;
          margin-left: 220px;
 }

}

@media only screen and (min-width: 650px) {
    .pagination{
          margin-top:5px;
          margin-left: 250px;
 }

}

@media only screen and (min-width: 665px) {
    .pagination{
          margin-top:25px;
          margin-left: 250px;
 }

}

@media only screen and (min-width: 700px) {
    .pagination{
          margin-top:35px;
          margin-left:215px;
 }
}


@media only screen and (min-width: 761px) {
    .pagination{
          margin-top:20px;
          margin-left:235px;
 }
}

@media only screen and (min-width: 764px) {
    .pagination{
          margin-top:20px;
          margin-left:300px;
 }
}

@media only screen and (min-width: 790px) {
    .pagination{
          margin-top:5px;
          margin-left:300px;
 }
}

@media only screen and (min-width: 800px) {
    .pagination{
          margin-top:5px;
          margin-left:300px;
 }
}



@media only screen and (min-width:1000px){

       .pagination{  margin-top:40px;
          margin-left:240px;
        }
}

@media only screen and (min-width:1002px){

       .pagination{  margin-top:10px;
          margin-left:36%;
        }
}

@media only screen and (min-width:1050px){

       .pagination{  margin-top:40px;
          margin-left:36%;
        }
}

@media only screen and (min-width:1065px){

       .pagination{  margin-top:20px;
          margin-left:36%;
        }
}



@media only screen and (min-width: 1200px) {
     .pagination{  margin-top:20px;
          margin-left:39%;
        }
}*/